<template>
  <div id="echarts-creator">
    <el-container id="el-container">
      <el-header id="echarts-creator-header">
        <el-button type="primary" icon="el-icon-search" @click="preview">预览</el-button>
      </el-header>
      <el-container>
        <el-aside width="300px" id="echarts-creator-aside" class="l">
          <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group> -->
          <el-menu 
            default-active="1-1" 
            class="el-menu-vertical-demo" 
            @open="handleOpen" @close="handleClose" 
            :collapse="isCollapse"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-submenu :index="(index+1)+''" v-for="(submenu, index) in navigation" :key="index">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">{{submenu.label}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="((index+1)+'-'+(i+1))+''" v-for="(sub, i) in submenu.nav" @click="changeEcharts(sub)" :key="i">{{sub.label}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main id="echarts-creator-main">
          <div id="myChart"></div>
        </el-main>
        <el-aside width="350px" id="echarts-creator-aside" class="r">
          <div id="echarts-workbench">
            <el-collapse accordion>
              <el-collapse-item>
                <template slot="title">
                  标题 <i class="header-icon el-icon-info"></i>
                </template>
                <div>
                  <el-form ref="form" :model="workbenchOptions" label-width="100px">
                    <el-form-item label="是否显示">
                      <el-switch @change="changeWorkbenchOptions('title:show', $event)" v-model="workbenchOptions.title.show"></el-switch>
                    </el-form-item>
                    <el-form-item label="标题">
                      <el-input @input="changeWorkbenchOptions('title:text', $event)" v-model="workbenchOptions.title.text"></el-input>
                    </el-form-item>
                    <el-form-item label="标题链接">
                      <el-input @input="changeWorkbenchOptions('title:link', $event)" v-model="workbenchOptions.title.link"></el-input>
                    </el-form-item>
                    <el-form-item label="打开窗口">
                      <el-radio-group @change="changeWorkbenchOptions('title:target', $event)" v-model="workbenchOptions.title.target" size="mini">
                        <el-radio-button label="self" >当前窗口</el-radio-button>
                        <el-radio-button label="blank" >新窗口</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="整体水平对齐">
                      <el-radio-group @change="changeWorkbenchOptions('title:textAlign', $event)" v-model="workbenchOptions.title.textAlign" size="mini">
                        <el-radio-button label="auto" >自动</el-radio-button>
                        <el-radio-button label="left" >左</el-radio-button>
                        <el-radio-button label="center" >中</el-radio-button>
                        <el-radio-button label="right" >右</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="整体垂直对齐">
                      <el-radio-group @change="changeWorkbenchOptions('title:textVerticalAlign', $event)" v-model="workbenchOptions.title.textVerticalAlign" size="mini">
                        <el-radio-button label="auto" >自动</el-radio-button>
                        <el-radio-button label="top" >上</el-radio-button>
                        <el-radio-button label="bottom" >中</el-radio-button>
                        <el-radio-button label="middle" >下</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否触发事件">
                      <el-switch @change="changeWorkbenchOptions('title:triggerEvent', $event)" v-model="workbenchOptions.title.triggerEvent"></el-switch>
                    </el-form-item>
                    <el-form-item label="内边距">
                      <el-input @input="changeWorkbenchOptions('title:padding', $event, 'toNumber|toArray')" placeholder="上,右,下,左 or 数字 or 上下,左右" v-model="workbenchOptions.title.padding"></el-input>
                    </el-form-item>
                    <el-form-item label="副标题">
                      <el-input @input="changeWorkbenchOptions('title:subtext', $event)" v-model="workbenchOptions.title.subtext"></el-input>
                    </el-form-item>
                    <el-form-item label="副标题链接">
                      <el-input @input="changeWorkbenchOptions('title:sublink', $event)" v-model="workbenchOptions.title.sublink"></el-input>
                    </el-form-item>
                    <el-form-item label="副标题窗口">
                      <el-radio-group @change="changeWorkbenchOptions('title:subtarget', $event)" v-model="workbenchOptions.title.subtarget" size="mini">
                        <el-radio-button label="self" >当前窗口</el-radio-button>
                        <el-radio-button label="blank" >新窗口</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="主副标题距离">
                      <el-input-number size="mini" @input="changeWorkbenchOptions('title:itemGap', $event)" v-model="workbenchOptions.title.itemGap"></el-input-number>
                    </el-form-item>
                    <el-form-item label="上|Top">
                      <el-input @input="changeWorkbenchOptions('title:top', $event)" placeholder="center,20,20%" v-model="workbenchOptions.title.top"></el-input>
                    </el-form-item>
                    <el-form-item label="左|Left">
                      <el-input @input="changeWorkbenchOptions('title:left', $event)" placeholder="center,20,20%" v-model="workbenchOptions.title.left"></el-input>
                    </el-form-item>
                    <el-form-item label="右|Right">
                      <el-input @input="changeWorkbenchOptions('title:right', $event)" placeholder="center,20,20%" v-model="workbenchOptions.title.right"></el-input>
                    </el-form-item>
                    <el-form-item label="下|Bottom">
                      <el-input @input="changeWorkbenchOptions('title:bottom', $event)" placeholder="center,20,20%" v-model="workbenchOptions.title.bottom"></el-input>
                    </el-form-item>
                    <el-form-item label="背景">
                      <el-color-picker @input="changeWorkbenchOptions('title:backgroundColor', $event)" v-model="workbenchOptions.title.backgroundColor" show-alpha></el-color-picker>
                    </el-form-item>

                    <el-form-item label="标题颜色">
                      <el-color-picker @input="changeWorkbenchOptions('title:textStyle:color', $event)" v-model="workbenchOptions.title.textStyle.color" show-alpha></el-color-picker>
                    </el-form-item>
                    <el-form-item label="标题风格">
                      <el-radio-group @change="changeWorkbenchOptions('title:textStyle:fontStyle', $event)" v-model="workbenchOptions.title.textStyle.fontStyle" size="mini">
                        <el-radio-button label="normal" >正常</el-radio-button>
                        <el-radio-button label="italic" >斜体</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="标题粗体">
                      <el-radio-group @change="changeWorkbenchOptions('title:textStyle:fontWeight', $event)" v-model="workbenchOptions.title.textStyle.fontWeight" size="mini">
                        <el-radio-button label="normal" >正常</el-radio-button>
                        <el-radio-button label="bold" >粗体</el-radio-button>
                        <el-radio-button label="bolder" >更粗</el-radio-button>
                        <el-radio-button label="lighter" >更细</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="标题大小">
                      <el-input-number size="mini" @change="changeWorkbenchOptions('title:textStyle:fontSize', $event)" v-model="workbenchOptions.title.textStyle.fontSize"></el-input-number>
                    </el-form-item>
                    

                    <el-form-item label="副标题颜色">
                      <el-color-picker @input="changeWorkbenchOptions('title:subtextStyle:color', $event)" v-model="workbenchOptions.title.subtextStyle.color" show-alpha></el-color-picker>
                    </el-form-item>
                    <el-form-item label="副标题风格">
                      <el-radio-group @change="changeWorkbenchOptions('title:subtextStyle:fontStyle', $event)" v-model="workbenchOptions.title.subtextStyle.fontStyle" size="mini">
                        <el-radio-button label="normal" >正常</el-radio-button>
                        <el-radio-button label="italic" >斜体</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="副标题粗体">
                      <el-radio-group @change="changeWorkbenchOptions('title:subtextStyle:fontWeight', $event)" v-model="workbenchOptions.title.subtextStyle.fontWeight" size="mini">
                        <el-radio-button label="normal" >正常</el-radio-button>
                        <el-radio-button label="bold" >粗体</el-radio-button>
                        <el-radio-button label="bolder" >更粗</el-radio-button>
                        <el-radio-button label="lighter" >更细</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="副标题粗体">
                      <el-input-number size="mini" @change="changeWorkbenchOptions('title:subtextStyle:fontSize', $event)" v-model="workbenchOptions.title.subtextStyle.fontSize"></el-input-number>
                    </el-form-item>
                                          

                    
                    



                  </el-form>
                </div>
              </el-collapse-item>
              <el-collapse-item title="图例组件legend">
                <div>
                  <el-form ref="form" :model="workbenchOptions" label-width="100px">
                    <el-form-item label="是否显示">
                      <el-switch @change="changeWorkbenchOptions('legend:show', $event)" v-model="workbenchOptions.legend.show"></el-switch>
                    </el-form-item>
                    <el-form-item label="图例类型">
                      <el-radio-group @change="changeWorkbenchOptions('legend:type', $event)" v-model="workbenchOptions.legend.type" size="mini">
                        <el-radio-button label="plain" >普通图例</el-radio-button>
                        <el-radio-button label="scroll" >滚动图例</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="图例布局">
                      <el-radio-group @change="changeWorkbenchOptions('legend:orient', $event)" v-model="workbenchOptions.legend.orient" size="mini">
                        <el-radio-button label="horizontal" >水平</el-radio-button>
                        <el-radio-button label="vertical" >垂直</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="上|Top">
                      <el-input @input="changeWorkbenchOptions('legend:top', $event)" placeholder="center,20,20%" v-model="workbenchOptions.legend.top"></el-input>
                    </el-form-item>
                    <el-form-item label="左|Left">
                      <el-input @input="changeWorkbenchOptions('legend:left', $event)" placeholder="center,20,20%" v-model="workbenchOptions.legend.left"></el-input>
                    </el-form-item>
                    <el-form-item label="右|Right">
                      <el-input @input="changeWorkbenchOptions('legend:right', $event)" placeholder="center,20,20%" v-model="workbenchOptions.legend.right"></el-input>
                    </el-form-item>
                    <el-form-item label="下|Bottom">
                      <el-input @input="changeWorkbenchOptions('legend:bottom', $event)" placeholder="center,20,20%" v-model="workbenchOptions.legend.bottom"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </el-collapse-item>
              <el-collapse-item title="直角坐标系内绘图网格Grid">
                <div>
                  <el-form ref="form" :model="workbenchOptions" label-width="100px">
                    <el-form-item label="是否显示">
                      <el-switch @change="changeWorkbenchOptions('grid:show', $event)" v-model="workbenchOptions.grid.show"></el-switch>
                    </el-form-item>
                    <el-form-item label="上|Top">
                      <el-input @input="changeWorkbenchOptions('grid:top', $event)" placeholder="center,20,20%" v-model="workbenchOptions.grid.top"></el-input>
                    </el-form-item>
                    <el-form-item label="左|Left">
                      <el-input @input="changeWorkbenchOptions('grid:left', $event)" placeholder="center,20,20%" v-model="workbenchOptions.grid.left"></el-input>
                    </el-form-item>
                    <el-form-item label="右|Right">
                      <el-input @input="changeWorkbenchOptions('grid:right', $event)" placeholder="center,20,20%" v-model="workbenchOptions.grid.right"></el-input>
                    </el-form-item>
                    <el-form-item label="下|Bottom">
                      <el-input @input="changeWorkbenchOptions('grid:bottom', $event)" placeholder="center,20,20%" v-model="workbenchOptions.grid.bottom"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </el-collapse-item>
              <el-collapse-item title="xAxis X轴">
                <div>
                  <el-form ref="form" :model="workbenchOptions" label-width="100px">
                    <el-form-item label="是否显示">
                      <el-switch @change="changeWorkbenchOptions('xAxis:show', $event)" v-model="workbenchOptions.xAxis.show"></el-switch>
                    </el-form-item>
                    <el-form-item label="坐标轴留白">
                      <el-switch @change="changeWorkbenchOptions('xAxis:boundaryGap', $event)" v-model="workbenchOptions.xAxis.boundaryGap"></el-switch>
                    </el-form-item>
                    <el-form-item label="类型">
                      <el-radio-group @change="changeWorkbenchOptions('xAxis:type', $event)" v-model="workbenchOptions.xAxis.type" size="mini">
                        <el-radio-button label="value" >数值轴</el-radio-button>
                        <el-radio-button label="category" >类目轴</el-radio-button>
                        <el-radio-button label="time" >时间轴</el-radio-button>
                        <el-radio-button label="log" >对数轴</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-form>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-aside>
      </el-container>
    </el-container>
    <el-dialog title="查看代码" :visible.sync="dialogTableVisible" width="80%">
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="textarea"
        show-word-limit
        :autosize="{ minRows: 10, maxRows: 100}"
      >
      </el-input>
    </el-dialog>
  </div>
</template>
<script>
import echartsJson from "@/assets/js/echartsJson"
export default {
  name: "Echarts",
  components: {
  },
  data() {
    return {
      myChart: null,
      isCollapse: false,
      dialogTableVisible: false,
      navigation: [],
      textarea: "",
      value: '12',
      option: {
        title: { text: '标题' },
        tooltip: {},
        xAxis: {
            data: ["分类1","分类2","分类3","分类4","分类5","分类6"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            smooth: true,
            data: [5, 20, 36, 10, 10, 20]
        }]
      },
      workbenchOptions: {
        title:{
          show: true ,
          text: '' ,
          link: '' ,
          target: 'blank' ,
          textStyle: {color: null} ,
          subtext: '' ,
          sublink: '' ,
          subtarget: 'blank' ,
          subtextStyle: {color: null} ,
          textAlign: 'auto' ,
          textVerticalAlign: 'auto' ,
          triggerEvent: false ,
          padding: 5 ,
          itemGap: 10 ,
          zlevel: 0 ,
          z: 2 ,
          left: 'auto' ,
          top: 'auto' ,
          right: 'auto' ,
          bottom: 'auto' ,
          backgroundColor: null ,
          borderColor: '#ccc' ,
          borderWidth: 0 ,
          borderRadius: 0 ,
          shadowBlur:  10,
          shadowColor:  'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 0 ,
          shadowOffsetY: 0 ,
        },
        legend: {
          type: null,
          id: null,
          show: true ,
          zlevel: 0 ,
          z: 2 ,
          left: 'auto' ,
          top: 'auto' ,
          right: 'auto' ,
          bottom: 'auto' ,
          width: 'auto' ,
          height: 'auto' ,
          orient: 'horizontal' ,
          align: 'auto' ,
          padding: 5 ,
          itemGap: 10 ,
          itemWidth: 25 ,
          itemHeight: 14 ,
          symbolKeepAspect: true ,
          formatter: null,
          selectedMode: true ,
          inactiveColor: '#ccc' ,
          selected: null,
          textStyle: {} ,
          tooltip: null,
          icon: null,
          data: [{}] ,
          backgroundColor: 'transparent' ,
          borderColor: '#ccc' ,
          borderWidth: 1 ,
          borderRadius: 0 ,
          shadowBlur: null,
          shadowColor: null,
          shadowOffsetX: 0 ,
          shadowOffsetY: 0 ,
          scrollDataIndex: 0 ,
          pageButtonItemGap: 5 ,
          pageButtonGap: null,
          pageButtonPosition: 'end' ,
          pageFormatter: '{current}/{total}' ,
          pageIcons: {} ,
          pageIconColor: '#2f4554' ,
          pageIconInactiveColor: '#aaa' ,
          pageIconSize: 15 ,
          pageTextStyle: {} ,
          animation: null,
          animationDurationUpdate: 800 ,
          emphasis: {} ,
          selector: false ,
          selectorLabel: {} ,
          selectorPosition: 'auto' ,
          selectorItemGap: 7 ,
          selectorButtonGap: 10 ,
        },
        grid: {
          id: null,
          show: false ,
          zlevel: 0 ,
          z: 2 ,
          left: '10%' ,
          top: 60 ,
          right: '10%' ,
          bottom: 60 ,
          width: 'auto' ,
          height: 'auto' ,
          containLabel: false ,
          backgroundColor: 'transparent' ,
          borderColor: '#ccc' ,
          borderWidth: 1 ,
          shadowBlur: null,
          shadowColor: null,
          shadowOffsetX: 0 ,
          shadowOffsetY: 0 ,
          tooltip: {} ,
        },
        xAxis: {
          id: null,
          show: true ,
          gridIndex: 0 ,
          position: null,
          offset: 0 ,
          realtimeSort: false ,
          sortSeriesIndex: 0 ,
          type: 'category' ,
          name: null,
          nameLocation: 'end' ,
          nameTextStyle: {} ,
          nameGap: 15 ,
          nameRotate: null,
          inverse: false ,
          boundaryGap: null,
          min: null,
          max: null,
          scale: false ,
          splitNumber: 5 ,
          minInterval: 0 ,
          maxInterval: null,
          interval: null,
          logBase: 10 ,
          silent: false ,
          triggerEvent: false ,
          axisLine: {} ,
          axisTick: {} ,
          minorTick: {} ,
          axisLabel: {} ,
          splitLine: {} ,
          minorSplitLine: {} ,
          splitArea: {} ,
          data: [{}] ,
          axisPointer: {} ,
          zlevel: 0 ,
          z: 0 ,
        }
      }
    }
  },
  watch: {
    option: {
      handler(news, olds) {
        this.updateEcharts();
      },
      immediate: false,
      deep: true
    },
    workbenchOptions: {
      handler(news, olds) {
        this.updateEcharts();
      },
      immediate: false,
      deep: true
    }
  },
  methods: {
    preview(){
      this.dialogTableVisible = true;
      this.textarea = echartsJson.previewXml(this.option);
    },
    changeWorkbenchOptions(prop, v, type){
      if(type && type.indexOf('toNumber|toArray') >= 0){
        if(v.indexOf(',')>=0){
          v = v.split(',');
          v.forEach(element => {
            element = parseInt(element);
          });
        }else{
          v = parseInt(v);
        }
      }
      if(prop.indexOf('xAxis') >= 0){
        /**
         * 如果是修改x轴
         * */
      }
      this.checkArrayInObject(prop.split(':'), v);
      this.updateEcharts();
    },
    checkArrayInObject(array, v){
      let obj = this.option;
      for(let i in array){
        if(i == array.length-1){
          obj[array[i]] = v;
        }else{
          obj = obj[array[i]] ? obj[array[i]] : obj[array[i]] = {};
        }
      }
      console.log("obj",this.option);
    },
    iterateThroughAllKeysAndValues(obj, newobj) {
      let news = newobj;
      for(let key in obj) {
        if(!obj.hasOwnProperty(key)) return;//排除掉原型继承而来的属性
        if(typeof obj[key] == 'object' || typeof obj[key] == 'function') {
          this.iterateThroughAllKeysAndValues(obj[key], newobj);//递归遍历属性值的子属性
        }else{
          console.log(key, obj[key], news);
        }
      }
    },
    /**
     * 点击菜单修改option
    */
    changeEcharts(sub){
      this.option = sub.option;
      this.iterateThroughAllKeysAndValues(this.option, this.workbenchOptions);
      this.updateEcharts();
      this.myChart.on('click', function (params) {
        console.log(params);
      });

      this.myChart.on('legendselectchanged', function (params) {
        console.log(params);
      });

      this.myChart.on('click', 'series.line', function (params) {
        console.log(params);
      });

      this.myChart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
        console.log(params);
      });
    },
    initEcharts(){
      // 基于准备好的dom，初始化echarts实例 绘制图表
      this.myChart = this.echarts.init(document.getElementById('myChart'));
      this.updateEcharts();
    },
    /**
     * 更新echarts
    */
    updateEcharts(){
      this.myChart.setOption(this.option, true);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted(){
    /**
     * 思路：option -> ["title:textStyle:color","series", "xAxis:type", "yAxis:type"]
     * 监听option —> 变成 ["title:textStyle:color","series", "xAxis:type", "yAxis:type", "xAxis:data"]
     * 再进行是否显示 编辑栏
    */
    this.navigation = echartsJson.navigation;
    this.initEcharts();
    this.updateEcharts();
  }
};
</script>

<style scoped lang="less">
#echarts-creator{
  width: 100%;
  height: 100%;
  #el-container{
    height:100%;
    .el-container{
      height:calc(100% - 60px);
    }
  }
  #echarts-creator-header{
    background: #2b3346;
  }
  #echarts-creator-aside{
    background: #545c64;
  }
  #echarts-creator-aside.r{
    background: #ffffff;
  }
  #echarts-creator-main{
    background: #e4f2ff;
  }
  #myChart{
    width: 100%;
    height: 100%;
  }
  #echarts-workbench{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
}
</style>
